<template>

    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="领用人">
            <el-input v-model="form.Accpetance_Person" />
        </el-form-item>
        <el-form-item label="领用时间">
            <el-date-picker v-model="form.AccpetanceTime" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <el-form-item label="审批状态" style="width:200px">
            <el-select v-model="form.AuditStatus" placeholder="请选择">
                <el-option label="请选择" :value="0" />
                <el-option label="待提交" :value="1" />
                <el-option label="待审批" :value="2" />
                <el-option label="已通过" :value="3" />
                <el-option label="已拒绝" :value="4" />
            </el-select>
        </el-form-item>

        <el-form-item label="审批人">
            <el-input v-model="form.Approver" />
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="getList">提交</el-button>
        </el-form-item>
    </el-form>







    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="describe" label="用途描述" width="180" />
        <el-table-column prop="accpetance_Person" label="领用人" />
        <el-table-column prop="" label="领用时间">
            <template #default="scope">
                <span>{{ scope.row.accpetanceTime }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="创建时间">
            <template #default="scope">
                <span>{{ scope.row.createTime }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="审批状态">
            <template v-slot="scope">

                <el-tag v-if="scope.row.auditStatus == 1">待提交</el-tag>
                <el-tag v-else-if="scope.row.auditStatus == 2">待审批</el-tag>
                <el-tag v-else-if="scope.row.auditStatus == 3">已通过</el-tag>
                <el-tag v-else-if="scope.row.auditStatus == 4">已拒绝</el-tag>

            </template>
        </el-table-column>
        <el-table-column prop="approver" label="审批人" />
        <el-table-column prop="" label="操作">
            <template v-slot="scope">
                <el-link type="danger" @click="deleRow(scope.row)">删除</el-link>&emsp;
                <el-link type="primary" v-if="scope.row.auditStatus == 1"
                    @click="changeStatus(scope.row, 2)">提交审批</el-link>
                <el-link type="primary" v-if="scope.row.auditStatus == 2" @click="changeStatus(scope.row)"></el-link>
                <el-link type="primary" v-if="scope.row.auditStatus == 3" @click="changeStatus(scope.row)"></el-link>
                <el-link type="primary" v-if="scope.row.auditStatus == 4"
                    @click="changeStatus(scope.row, 2)">重新提交审批</el-link>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
            :page-sizes="[1, 2, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import axios from '../../../api/http'

onMounted(() => {
    getList();
})

const form = reactive({
    Accpetance_Person: '',
    AccpetanceTime: '',
    AuditStatus: 0,
    Approver: '',
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0,
})
const handleSizeChange = (val: number) => {
    form.PageSize = val;
    getList();
}
const handleCurrentChange = (val: number) => {
    form.PageIndex = val;
    getList();
}


//删除
const deleRow = (row: any) => {

    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/setpath/api/Acceptance/DeleteAcceptance?acceptanceId=" + row.acceptanceId).then(res => {
                if (res.result > 0) {
                    ElMessage.success('删除成功');
                    getList();
                }
                else {
                    ElMessage.error('删除失败');
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
//修改状态
const changeStatus = (row: any, state: any) => {


    axios.post("/setpath/api/Acceptance/UpdateState?id=" + row.acceptanceId + "&newStatus=" + state).then(res => {
        if (res.result > 0) {
            ElMessage.success('修改成功');

            getList();
        }
        else {
            ElMessage.error('修改失败');
        }
    })
}


//显示
const tableData = ref([]);
const getList = () => {
    axios.post('/setpath/api/Acceptance/GetAccpetance', form).then(res => {
        // 使用 res.data 获取实际响应数据
        tableData.value = res.result.data;
        form.totalCount = res.result.totalCount;
        form.pageCount = res.result.pageCount;
    }).catch(error => {
        console.log(error)
    });
}



</script>
